<template>
  <div>
    <ul class="nav nav-pills nav-fill">
      <li class="nav-item" v-for="(item, index) in navList" :key="index">
        <router-link
          class="nav-link"
          style="margin: 0 10px"
          exact
          active-class="active"
          :to="item.to"
          >{{ item.title }}</router-link
        >
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        { to: "/", title: "首页" },
        { to: "/newBook", title: "新书" },
        { to: "/specialBook", title: "特价书" },
        { to: "/textBook", title: "教材" },
        { to: "/avBook", title: "视听教程" },
      ],
    };
  },
};
</script>
